<link rel="stylesheet" href="${request.contextPath}/static/oms/default/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link href="${request.contextPath}/static/oms/iframe/plugins/bootstrap-icon-picker/css/icon-picker.css"  rel="stylesheet" type="text/css" />
<div class="row">
	<div class="col-md-12">
		<form id="edit-form" class="form-horizontal" action="${request.contextPath}/cms/channel/update" method="post" onsubmit="return false">
			<input type="hidden" id="id" name="id" value="${cmsChannel.id}">
			<div class="box-body">
				<div class="form-group">
					<label id="channelNameLabel" for="channelName" class="col-sm-2 control-label">名称</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="name" id="channelName" value="${cmsChannel.name}" placeholder="输入名称...">
					</div>
					<label id="channelCodeLabel" for="channelCode" class="col-sm-2 control-label" >编码</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="code" id="channelCode" value="${cmsChannel.code}" placeholder="输入编码...">
					</div>
				</div>
				<div class="form-group">
					<label id="channelSiteLabel" for="channelSiteId" class="col-sm-2  control-label">所属站点</label>
					<div class="col-sm-4">
						<select class="form-control" id="channelSiteId"  name="siteId" style="width: 100%;" placeholder="选择站点...">
						</select>
					</div>
					<label id="channelModelLabel" for="channelStatus" class="col-sm-2  control-label">模型</label>
					<div class="col-sm-4">
						<select class="form-control" id="channelModelId"  name="modelId" value="${cmsChannel.modelId}" style="width: 100%;" placeholder="选择模型...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="channelSeoTitleLabel" for="channelSeoTitle" class="col-sm-2 control-label">SEO标题</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="seoTitle" id="channelSeoTitle" value="${cmsChannel.seoTitle}"  placeholder="输入SEO标题...">
					</div>
				</div>
				<div class="form-group">
					<label id="channelParentIdLabel" for="channelParentId" class="col-sm-2  control-label">上级栏目</label>
					<div class="col-sm-4">
						<div class="input-group">
							<input type="hidden" class="form-control" id="channelParentId" name="parentId"  value="${cmsChannel.parentId}" >
							<input type="text" class="form-control"  id="channelParentName" value="" placeholder="选择上级栏目...">
							<span class="input-group-addon"><i class="glyphicon glyphicon-remove" style="color: #FF0000;" id="channelParentIdClear"></i></span>
							<div id="channelContent" class="channelContent" style="position: absolute; left: 0px; top: 25px; display: none;z-index: 999999;">
								<ul id="channelParentTree" class="ztree" style="margin-top: 10px;
																border: 1px solid #d6e0df;
																background: #fbfbfb;
																width: 220px;
																height: 360px;
																overflow-y: scroll;
																overflow-x: auto; -moz-user-select: none;">
								</ul>
							</div>
						</div>
					</div>
					<label id="channelTargetLabel" for="channelTarget" class="col-sm-2  control-label">打开方式</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" name="target" id="channelTarget" value="${cmsChannel.target}"   placeholder="输入打开方式...">
					</div>
				</div>
				<div class="form-group">
					<label id="channelChannelAttributeLabel" for="channelChannelAttribute" class="col-sm-2  control-label">栏目属性</label>
					<div class="col-sm-4">
						<select class="form-control" id="channelChannelAttribute"  name="channelAttribute" style="width: 100%;" placeholder="选择栏目属性...">
						</select>
					</div>
				</div>
				<div class="form-group" id="channelUrlDiv" style="display: none;">
					<label id="channelUrlLabel" for="channelUrl" class="col-sm-2  control-label">链接</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="url" id="channelUrl"   value="${cmsChannel.url}"  placeholder="输入链接...">
					</div>
				</div>
				<div class="form-group" id="channelDirDiv" style="display: block;">
					<label id="channelDirLabel" for="channelDir" class="col-sm-2  control-label">栏目目录</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="channelDir" id="channelDir"  value="${cmsChannel.channelDir}" placeholder="输入栏目目录...">
					</div>
				</div>
				<div class="form-group">
					<label id="channelPriorityLabel" for="channelPriority" class="col-sm-2  control-label">优先级</label>
					<div class="col-sm-4">
						<input class="form-control" name="priority" id="channelPriority" type="number"  value="${cmsChannel.priority}"  placeholder="输入优先级...">
					</div>
					<label id="channelStatusLabel" for="channelStatus" class="col-sm-2  control-label">状态</label>
					<div class="col-sm-4">
						<select class="form-control" id="channelStatus"  name="validStatus"  value="${cmsChannel.validStatus}"   style="width: 100%;" placeholder="选择状态...">
						</select>
					</div>
				</div>
				<div class="form-group">
					<label id="channelDescriptionLabel" class="col-sm-2 control-label" >描述</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="description" id="channelDescription"  value="${cmsChannel.description}"  placeholder="输入描述...">
					</div>
				</div>
				<div class="form-group">
					<label id="channelRemarkLabel" class="col-sm-2 control-label">备注</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="remark" id="channelRemark" value="${cmsChannel.remark}"  placeholder="输入备注...">
					</div>
				</div>
				<div class="error-message text-center" >
					<span class="error-icon"></span>
					<span id="error-msg" class="error-msg" ></span>
				</div>
			</div>
			<div class="box-footer">
				<div class="pull-right">
					<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><i class="fa fa-close"></i> 关闭</button>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript" src="${request.contextPath}/static/oms/default/plugins/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${request.contextPath}/static/oms/iframe/plugins/bootstrap-icon-picker/js/iconPicker.js"></script>

<script type="text/javascript">
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId",
                rootPId: null
            }
        },
        async: {
            enable: true,
            url:"/cms/channel/treeGrid",
            dataFilter:function (treeId, parentNode, responseData) {
                if (responseData) {
                    for(var i =0; i < responseData.length; i++) {
                        responseData[i].url = null;
                    }
                }
                return responseData;
            }
        },
        callback:{
            onAsyncSuccess:function (event, treeId) {
                var node = $.fn.zTree.getZTreeObj(treeId).getNodeByParam("id", $("#channelParentId").val());
                if(node){
                    $("#channelParentName").val(node.name);
                }
            },
            onClick :function (event, treeId, treeNode) {
                $("#channelParentId").val(treeNode.id);
                $("#channelParentName").val(treeNode.name);
                $('#channelContent').hide();
            }
        }
    };
    $(function() {
        $("#channelStatus").select2({
            data: StatusStore,
            language: "zh-CN",
            theme: "bootstrap"
        }).val('${cmsChannel.validStatus}').trigger("change");

        var channelChannelAttribute =  $("#channelChannelAttribute");
        channelChannelAttribute.select2({
            data: ChannelAttributeStore,
            placeholder: "栏目属性...",
            language: "zh-CN",
            theme: "bootstrap",
            minimumResultsForSearch: Infinity
        }).val('${cmsChannel.channelAttribute}').trigger("change");

        function initChannelAttribute(){
            if('${cmsChannel.channelAttribute}'=='3'){
                $("#channelUrlDiv").show();
                $("#channelDirDiv").hide();
            }else{
                $("#channelUrlDiv").hide();
                $("#channelDirDiv").show();
            }
        }
        initChannelAttribute();
        channelChannelAttribute.on('change',function () {
            if($(this).val()==='3'){
                $("#channelUrlDiv").show();
                $("#channelDirDiv").hide();
            }else{
                $("#channelUrlDiv").hide();
                $("#channelDirDiv").show();
            }
        });

        $.ajax({
            type:"get",
            url:'/cms/model/list',
            dataType:'json'
        }).done(function(result){
            var o = [];
            var a = result;
            $.each(a, function() {
                if(this.id != undefined && this.id !=''){
                    o.push({'id':this.id,'text':this.name});
                }
            });
            $("#channelModelId").select2({
                data:o,
                placeholder: "模型...",
                allowClear: true,
                language: "zh-CN",
                theme: "bootstrap"
            }).val('${cmsChannel.modelId}').trigger("change");
        });

        $.ajax({
            type:"get",
            url:'/cms/site/list',
            dataType:'json'
        }).done(function(result){
            var o = [];
            var a = result;
            $.each(a, function() {
                if(this.id != undefined && this.id !=''){
                    o.push({'id':this.id,'text':this.name});
                }
            });
            $("#channelSiteId").select2({
                data:o,
                placeholder: "站点...",
                allowClear: true,
                language: "zh-CN",
                theme: "bootstrap"
            }).val('${cmsChannel.siteId}').trigger("change");
        });


        $.fn.zTree.init($('#channelParentTree'), setting);

        $("#channelParentName").on('click',function () {
            $('#channelContent').css("display")==='none'?$('#channelContent').show():$('#channelContent').hide();
        });
        $("#channelContent").mouseleave(function () {
            $('#channelContent').hide();
        });

        $("#channelParentIdClear").on('click',function () {
            $("#channelParentId").val("");
            $("#channelParentName").val("");
        });

    });
</script>